<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>layui</title>
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <link rel="stylesheet" href="/frame/layui/css/layui.css"  media="all">
  <!-- 注意：如果你直接复制所有代码到本地，上述css路径需要改成你本地的 -->
</head>
<body>
<form class="layui-form" action="" id="formId">
<fieldset class="layui-elem-field" style="margin: 10px;">
<!-- 	<legend>请求地址</legend> -->
	<div class="layui-field-box">
		<input name="apiId" value="${apiInfo.id!}" style="display: none;">
		<input name="moduleId" value="${apiInfo.moduleId!}" style="display: none;">
		<div class="layui-input-inline" style="width: 100px;">
			<select name="protocol" >
				<option value="http://"           <#if apiInfo??&&(apiInfo.protocol??&&apiInfo.protocol=="http://")>selected="selected" </#if>>http</option>
				<option value="https://" disabled <#if apiInfo??&&(apiInfo.protocol??&&apiInfo.protocol=="https://")>selected="selected" </#if>>https</option>
			</select>
		</div>
		<div class="layui-input-inline" style="width: 180px;">
			<input type="text" id="ip" name="ip" value="${apiInfo.ip!projectInfo.ip!}" placeholder="IP或者域名" autocomplete="off" class="layui-input">
		</div>
		<div class="layui-input-inline" style="width: 50px;">
			<input type="text" id="port" name="port" value="${apiInfo.port!projectInfo.port!}" placeholder="端口（默认80）" autocomplete="off" class="layui-input">
		</div>
		<div class="layui-input-inline" style="width: 260px;">
			<input type="text" id="url" name="url" value="${apiInfo.url!}" placeholder="URL" autocomplete="off" class="layui-input">
		</div>
		<div class="layui-input-inline" style="width: 75px;">
			<select name="requestmethod" >
				<option value="post" <#if apiInfo??&&(apiInfo.requestMethod??&&apiInfo.requestMethod=="post")>selected="selected" </#if>>post</option>
				<option value="get" <#if apiInfo??&&(apiInfo.requestMethod??&&apiInfo.requestMethod=="get")>selected="selected" </#if>>get</option>
			</select>
		</div>
		<div class="layui-input-inline" style="width: 100px;">
			<select name="disposetype" >
				<option value="base" <#if apiInfo??&&(apiInfo.disposeType??&&apiInfo.disposeType=="base")>selected="selected" </#if>>普通请求</option>
				<option value="des"  <#if apiInfo??&&(apiInfo.disposeType??&&apiInfo.disposeType=="des")>selected="selected" </#if>>DES加密</option>
			</select>
		</div>
		<div class="layui-input-inline" style="width: 180px;">
			<input type="button" onclick="doRequest()" class="layui-btn layui-btn-warm" value="请求">
			<input type="button" onclick="saveApiInfo()" class="layui-btn layui-btn-normal" value="保存">
		</div>
		
		<hr/>
	</div>
</fieldset>

<fieldset class="layui-elem-field" style="margin: 10px;">
	<legend>请求头</legend>
	<input name="requestHeader_index_values" id="requestHeader_index_values" value="${requestHeaderListIds!}" style="width: 100%;display: none;">
	<div class="layui-field-box" id="requestHeader_all_body">
		<#if requestHeaderList??>
			<#list requestHeaderList as x >
				<div class="layui-input-inline" style="width: 100%;" id="requestHeader_${x.id!}_body">
					<div class="layui-input-inline" style="width: 200px;">
						 <input type="text" name="requestHeader_${x.id!}_name" value="${x.name!}" id="requestHeader_${x.id!}_name"  placeholder="参数" autocomplete="off" class="layui-input">
					</div>
					<div class="layui-input-inline" style="width: 220px;">
						<input type="text" name="requestHeader_${x.id!}_val" value="${x.val!}" id="requestHeader_${x.id!}_val"   placeholder="值" autocomplete="off" class="layui-input">
					</div>
					<div class="layui-input-inline" style="width: 300px;">
						<input type="text" name="requestHeader_${x.id!}_notes" value="${x.notes!}" id="requestHeader_${x.id!}_notes"   placeholder="备注" autocomplete="off" class="layui-input">
					</div>
					<div class="layui-input-inline" style="width: 80px;">
						<button class="layui-btn layui-btn-danger" onclick="delRequestHeader('${x.id!}')">
						 	删除
						</button>
					</div>
					<hr/>
				</div>
			</#list>
		</#if>
	</div>
	<div class="layui-input-inline" style="width: 100%;margin: 10px;">
		<input type="button" onclick="addRequestHeader()" class="layui-btn layui-btn-warm" value="添加请求头">
	</div>
</fieldset>

<fieldset class="layui-elem-field" style="margin: 10px;">
	<legend>工具</legend>
	<fieldset class="layui-elem-field" style="margin: 10px;width:200px;float: left;">
	<div class="layui-field-box">
		<div class="layui-input-inline" style="width: 180px;">
			<select id="domainId" lay-filter="domain">
				<#list domainList as x>
					<option value="${x.id!}" ipOrDomain="${x.ipOrDomain!}" port="${x.port!}">${x.name!}</option>
				</#list>
			</select>
			<div class="layui-form-mid layui-word-aux">会改变上面的域名和端口</div>
		</div>
	</div>
	</fieldset>
	
	<fieldset class="layui-elem-field" style="margin: 10px;width:250px;float: left;">
	<div class="layui-field-box">
		<div class="layui-input-inline" style="width: 180px;">
			<select name="threadNum">
				<option value="1">1个用户</option>
				<option value="3">3个用户</option>
				<option value="5">5个用户</option>
				<option value="7">7个用户</option>
				<option value="10">10个用户</option>
			</select>
			<select name="requestNum">
				<option value="3">每个用户请求3次</option>
				<option value="5">每个用户请求5次</option>
				<option value="7">每个用户请求7次</option>
				<option value="10">每个用户请求10次</option>
				<option value="12">每个用户请求12次</option>
			</select>
			<div class="layui-form-mid layui-word-aux"></div>
			<div class="layui-input-inline" style="width: 200px;">
				<input type="button" onclick="doBatchRequest()" class="layui-btn layui-btn-warm" value="批量请求">
			</div>
		</div>
	</div>
	</fieldset>
</fieldset>

<fieldset class="layui-elem-field" style="margin: 10px;">
	<legend>请求参数</legend>
	<input name="requestParams_index_values" id="requestParams_index_values" value="${requestParamsListIds!}" style="width: 100%;display: none;">
	<div class="layui-field-box" id="requestParams_all_body">
		<#if requestParamsList??>
			<#list requestParamsList as x >
				<div class="layui-input-inline" style="width: 100%;" id="requestParams_${x.id!}_body">
					<div class="layui-input-inline" style="width: 80px;">
						<input lay-filter="must" type="checkbox" <#if x.is_must??&& x.is_must == '1'>checked="checked"</#if>  value="1" name="requestParams_${x.id!}_must" id="requestParams_${x.id!}_must" title="必须" /> 
					</div>
					<div class="layui-input-inline" style="width: 200px;">
						 <input type="text" name="requestParams_${x.id!}_name" value="${x.name!}" id="requestParams_${x.id!}_name"  placeholder="参数" autocomplete="off" class="layui-input">
					</div>
					<div class="layui-input-inline" style="width: 220px;">
						<input type="text" name="requestParams_${x.id!}_val" value="${x.val!}" id="requestParams_${x.id!}_val"   placeholder="参数值" autocomplete="off" class="layui-input">
					</div>
					<div class="layui-input-inline" style="width: 300px;">
						<input type="text" name="requestParams_${x.id!}_notes" value="${x.notes!}" id="requestParams_${x.id!}_notes"   placeholder="参数备注" autocomplete="off" class="layui-input">
					</div>
					<div class="layui-input-inline" style="width: 80px;">
						<button class="layui-btn layui-btn-danger" onclick="delRequestParams('${x.id!}')">
						 	删除
						</button>
					</div>
					<hr/>
				</div>
			</#list>
		</#if>
	</div>
	<div class="layui-input-inline" style="width: 100%;margin: 10px;">
		<input type="button" onclick="addRequestParams()" class="layui-btn layui-btn-warm" value="添加请求参数">
	</div>
</fieldset>

<fieldset class="layui-elem-field" style="margin: 10px;">
	<legend>返回数据</legend>
	<div class="layui-input-inline" style="width: 100%;margin: 10px;">
		<input type="button" onclick="formatJson()" class="layui-btn layui-btn-warm" value="格式化json字符串">
	</div>
	<div class="layui-field-box">
		<div class="layui-input-inline" style="width: 90%;">
			<textarea name="responseBody" style="" id="responseBody" placeholder="请输入" class="layui-textarea">${apiInfo.responseBody!}</textarea>
		</div>
	</div>
</fieldset>

<fieldset class="layui-elem-field" style="margin: 10px 10px 50px 10px;">
	<legend>响应参数</legend>
	<input name="responseParams_index_values" id="responseParams_index_values" value="${responseParamsListIds!}" style="width: 100%;display: none;">
	<div class="layui-field-box" id="responseParams_all_body">
		<#if responseParamsList??>
			<#list responseParamsList as x >
				<div class="layui-input-inline" style="width: 100%;" id="responseParams_${x.id!}_body">
					<div class="layui-input-inline" style="width: 220px;">
						<input type="text" name="response_${x.id!}_name" id="response_${x.id!}_name" value="${x.name!}" placeholder="参数" autocomplete="off" class="layui-input">
					</div>
					<div class="layui-input-inline" style="width: 220px;">
						<input type="text" name="response_${x.id!}_val" id="response_${x.id!}_val" value="${x.val!}" placeholder="参数值" autocomplete="off" class="layui-input">
					</div>
					<div class="layui-input-inline" style="width: 300px;">
						<input type="text" name="response_${x.id!}_notes" id="response_${x.id!}_notes" value="${x.notes!}" placeholder="参数备注" autocomplete="off" class="layui-input">
					</div>
					<div class="layui-input-inline" style="width: 80px;">
						<button class="layui-btn layui-btn-danger" onclick="delResponseParams('${x.id!}')">
						 	删除
						</button>
					</div>
					<hr/>
				</div>
			</#list>
		</#if>
	</div>
	<div class="layui-input-inline" style="width: 100%;margin: 10px;">
		<input type="button" class="layui-btn layui-btn-warm" value="添加响应参数" onclick="addResponseParams()">
	</div>
</fieldset>


</form>
<script type="text/javascript" src="/js/jquery-1.4.4.min.js"></script>
<script src="/frame/layui/lay/dest/layui.all.js" charset="utf-8"></script>
<!-- 模板引擎 -->
<script src="/js/template/template.js" charset="utf-8"></script>
<script src="/js/template/templateUtil.js" charset="utf-8"></script>

<script>
function getUUID() {
    var s = [];
    var hexDigits = "0123456789abcdef";
    for (var i = 0; i < 36; i++) {
        s[i] = hexDigits.substr(Math.floor(Math.random() * 0x10), 1);
    }
    s[14] = "4"; 
    s[19] = hexDigits.substr((s[19] & 0x3) | 0x8, 1); 
                                                        
    s[8] = s[13] = s[18] = s[23] = "-";

    var uuid = s.join("");
    return uuid;
}
var form;
layui.use('form', function(){
   form = layui.form();
});
</script>
<script id="requestHeader_tmp" type="text/html">
		<div class="layui-input-inline" style="width: 100%;" id="requestHeader_{{index}}_body">

			<div class="layui-input-inline" style="width: 200px;">
				 <input type="text" name="requestHeader_{{index}}_name" id="requestHeader_{{index}}_name" placeholder="参数" autocomplete="off" class="layui-input">
			</div>
			<div class="layui-input-inline" style="width: 220px;">
				<input type="text" name="requestHeader_{{index}}_val" id="requestHeader_{{index}}_val"  placeholder="值" autocomplete="off" class="layui-input">
			</div>
			<div class="layui-input-inline" style="width: 300px;">
				<input type="text" name="requestHeader_{{index}}_notes" id="requestHeader_{{index}}_notes" placeholder="备注" autocomplete="off" class="layui-input">
			</div>
			<div class="layui-input-inline" style="width: 80px;">
				<button class="layui-btn layui-btn-danger" onclick="delRequestHeader('{{index}}')">
				 	删除
				</button>
			</div>
			<hr/>
		</div>
</script>
<script id="requestParams_tmp" type="text/html">
		<div class="layui-input-inline" style="width: 100%;" id="requestParams_{{index}}_body">
			<div class="layui-input-inline" style="width: 80px;">
				<input lay-filter="must" type="checkbox" value="1" name="requestParams_{{index}}_must" id="requestParams_{{index}}_must" title="必须"> 
			</div>
			<div class="layui-input-inline" style="width: 200px;">
				 <input type="text" name="requestParams_{{index}}_name" id="requestParams_{{index}}_name" placeholder="参数" autocomplete="off" class="layui-input">
			</div>
			<div class="layui-input-inline" style="width: 220px;">
				<input type="text" name="requestParams_{{index}}_val" id="requestParams_{{index}}_val"  placeholder="参数值" autocomplete="off" class="layui-input">
			</div>
			<div class="layui-input-inline" style="width: 300px;">
				<input type="text" name="requestParams_{{index}}_notes" id="requestParams_{{index}}_notes" placeholder="参数备注" autocomplete="off" class="layui-input">
			</div>
			<div class="layui-input-inline" style="width: 80px;">
				<button class="layui-btn layui-btn-danger" onclick="delRequestParams('{{index}}')">
				 	删除
				</button>
			</div>
			<hr/>
		</div>
</script>

<script id="responseParams_tmp" type="text/html">
		<div class="layui-input-inline" style="width: 100%;" id="responseParams_{{index}}_body">
			<div class="layui-input-inline" style="width: 220px;">
				<input type="text" name="response_{{index}}_name"  id="response_{{index}}_name" placeholder="参数" autocomplete="off" class="layui-input">
			</div>
			<div class="layui-input-inline" style="width: 220px;">
				<input type="text" name="response_{{index}}_val" id="response_{{index}}_val" placeholder="参数值" autocomplete="off" class="layui-input">
			</div>
			<div class="layui-input-inline" style="width: 300px;">
				<input type="text" name="response_{{index}}_notes" id="response_{{index}}_notes" placeholder="参数备注" autocomplete="off" class="layui-input">
			</div>
			<div class="layui-input-inline" style="width: 80px;">
				<button class="layui-btn layui-btn-danger" onclick="delResponseParams('{{index}}')">
				 	删除
				</button>
			</div>
			<hr/>
		</div>
</script>
<script type="text/javascript">
form.on('select(domain)', function(data){
// 	$('#domainId option:selected') .attr("ipOrDomain");
	$("#ip").val($('#domainId option:selected') .attr("ipOrDomain"));
	$("#port").val($('#domainId option:selected') .attr("port"));
});     
</script>
<script type="text/javascript">

function addIndex(index,id){
	var values = $("#"+id).val();
	if(isNull(values)){
		$("#"+id).val(index)
	}else{
		$("#"+id).val(values+"_"+index)
	}
}
function removeIndex(index,id){
	var values = $("#"+id).val();
	if(isNull(values)){
		$("#"+id).val("")
	}else{
		var list = values.split("_");
		var values_temp = "";
		for (i = 0; i < list.length; i++) {  
			if(list[i]!=index){
				if(isNotNull(values_temp)){
					values_temp=values_temp+"_";
				}
				values_temp=values_temp+list[i];
			}
		}
		$("#"+id).val(values_temp)
	}
}
</script>
<script>

	var indexRequestHeaderValues = 'requestHeader_index_values';
	function addRequestHeader(){
		var uuid = getUUID();
		var data = {
				index:uuid
		}
		var html = template("requestHeader_tmp", data);
		$("#requestHeader_all_body").append(html);
		form.render();
		addIndex(uuid,indexRequestHeaderValues);
	}
	function delRequestHeader(id){
		$("#requestHeader_"+id+"_body").remove();
		removeIndex(id,indexRequestHeaderValues);
	};

	var indexRequestValues = 'requestParams_index_values';
	function addRequestParams(){
		var uuid = getUUID();
		var data = {
				index:uuid
		}
		var html = template("requestParams_tmp", data);
		$("#requestParams_all_body").append(html);
		form.render();
		addIndex(uuid,indexRequestValues);
	}
	function delRequestParams(id){
		$("#requestParams_"+id+"_body").remove();
		removeIndex(id,indexRequestValues);
	};
	
	
	var indexResponseValues = "responseParams_index_values";
	function addResponseParams(){
		var uuid = getUUID();
		var data = {
				index:uuid
		}
		var html = template("responseParams_tmp", data);
		$("#responseParams_all_body").append(html);
		form.render();
		addIndex(uuid,indexResponseValues);
	}
	function delResponseParams(id){
		$("#responseParams_"+id+"_body").remove();
		removeIndex(id,indexResponseValues);
	}
</script>
<!-- <script type="text/javascript" color="255,0,0" opacity='0.7' zIndex="-2" count="200" src="${basePath}/js/canvas-nest.js"></script> -->
<script type="text/javascript">
	function getFormParam(){
		return $("#formId").serialize();
	}
	function boolRequest(){
		var headerValues = $("#"+indexRequestHeaderValues).val();
		if(isNotNull(headerValues)){
			var list = headerValues.split("_");
			for (i = 0; i < list.length; i++) { 
				if(isNull($("#requestHeader_"+list[i]+"_name").val())){
					layer.tips('不能为空', "#requestHeader_"+list[i]+"_name", {
						  tips: [1, '#0FA6D8'] //还可配置颜色
					});
					$("#requestHeader_"+list[i]+"_name").focus();
					return false;
				}
// 				if(isNull($("#requestHeader_"+list[i]+"_val").val())){
// 					layer.tips('不能为空', "#requestHeader_"+list[i]+"_val", {
// 						  tips: [1, '#0FA6D8'] //还可配置颜色
// 					});
// 					$("#requestHeader_"+list[i]+"_val").focus();
// 					return false;
// 				}
			}
		}
		
		
		var values = $("#"+indexRequestValues).val();
		if(isNotNull(values)){
			var list = values.split("_");
			for (i = 0; i < list.length; i++) { 
				if(isNull($("#requestParams_"+list[i]+"_name").val())){
					layer.tips('不能为空', "#requestParams_"+list[i]+"_name", {
						  tips: [1, '#0FA6D8'] //还可配置颜色
					});
					$("#requestParams_"+list[i]+"_name").focus();
					return false;
				}
				if($("#requestParams_"+list[i]+"_must").attr("checked")==true){
					if(isNull($("#requestParams_"+list[i]+"_val").val())){
						layer.tips('不能为空', "#requestParams_"+list[i]+"_val", {
							  tips: [1, '#0FA6D8'] //还可配置颜色
						});
						$("#requestParams_"+list[i]+"_val").focus();
						return false;
					}
				}
			}
		}
		return true;
	}
	
	function boolResponse(){
		var values = $("#"+indexResponseValues).val();
		if(isNotNull(values)){
			var list = values.split("_");
			for (i = 0; i < list.length; i++) { 
				if(isNull($("#response_"+list[i]+"_name").val())){
					layer.tips('不能为空', "#response_"+list[i]+"_name", {
						  tips: [1, '#0FA6D8'] //还可配置颜色
					});
					$("#response_"+list[i]+"_name").focus();
					return false;
				}
			}
		}
		return true;
	}
	
	function doRequest(){
		if(!boolRequest()){
			return;	
		}
		var index = layer.load(1, {
			  shade: [0.2,'#fff'] //0.1透明度的白色背景
			});
		 $.ajax({
             type: "POST",
             url: "${basePath}/api/doRequest",
             data: getFormParam(),
             dataType: "json",
             success: function(data){
            	layer.close(index);
             	if(data.isSuccess){
             		layer.msg(data.message,{time: 500});
             		$("#responseBody").val(data.data);
             		autoTextareaHeight();
             	}else{
             		layer.msg(data.message,{time: 3000});
             	}
             },
             error: function(data){
            	 layer.close(index);
            	 layer.msg("网络错误！",{time: 800});
             }
         });
	}
	function doBatchRequest(){
		if(!boolRequest()){
			return;	
		}
		var index = layer.load(1, {
			  shade: [0.2,'#fff'] //0.1透明度的白色背景
			});
		 $.ajax({
             type: "POST",
             url: "${basePath}/api/doBatchRequest",
             data: getFormParam(),
             dataType: "json",
             success: function(data){
            	 layer.close(index);
             	if(data.isSuccess){
             		layer.msg(data.message,{time: 500});
             		$("#responseBody").val(data.data);
             		autoTextareaHeight();
             	}else{
             		layer.msg(data.message,{time: 3000});
             	}
             },
             error: function(data){
            	 layer.close(index);
            	 layer.msg("网络错误！",{time: 800});
             }
         });
	}
	
	
	function saveApiInfo(){
		if(!boolRequest()){
			return;	
		}
		if(!boolResponse()){
			return;	
		}
		 $.ajax({
             type: "POST",
             url: "${basePath}/api/saveApiInfo",
             data: getFormParam(),
             dataType: "json",
             success: function(data){
             	if(data.isSuccess){
					layer.msg(data.message,{time: 500});
             		autoTextareaHeight();
             	}else{
             		layer.msg(data.message,{time: 3000});
             	}
             },
             error: function(data){
            	 layer.msg("网络错误！",{time: 800});
             }
         });
	}
</script>
<script type="text/javascript">
	function formatJson(){
		var responseBody = $("#responseBody").val();
		if(isNotNull(responseBody)){
			$("#responseBody").val(responseBody)
			$.ajax({
	             type: "POST",
	             url: "${basePath}/api/formatStr",
	             data: {"data":responseBody},
	             dataType: "json",
	             success: function(data){
	             	if(data.isSuccess){
	             		layer.msg(data.message,{time: 500});
	             		$("#responseBody").val(data.data);
	             		autoTextareaHeight();
	             	}
	             },
	             error: function(data){
	            	 layer.msg("网络错误！",{time: 800});
	             }
	         });
		}
		
	}
	
	function autoTextareaHeight(){
	    $("#responseBody").css('height',"auto"); 
	    $("#responseBody").css('margin-top','0px'); 
	    $("#responseBody").css('margin-bottom','0px'); 
	    $("#responseBody").css('height', document.getElementById("responseBody").scrollHeight+10); 
	}
	autoTextareaHeight();
	
</script>
</body>
</html>
